<template>
    <section class="loginMask" v-if="loginShow">
        <div class="loginContent" :style="style">
            <span class="loginClose el-icon-close" @click="loginMaskClose"></span>
            <template>
                <el-tabs v-model="loginName" @tab-click="handleClick">
                    <el-tab-pane label="登录" name="login">
                        <div class="loginBox">
                            <ul class="loginList">
                                <li>
                                    <input type="text" placeholder="请输入手机号">
                                </li>
                                <li>
                                    <input type="password" placeholder="请输入密码">
                                </li>
                                <li class="registerNum">
                                    <div class="clearfix">
                                        <input type="text">
                                        <div class="registerImg">
                                            <img src="../../img/registerImg.png">
                                            <button></button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <p class="clearfix inputTel">
                                <span>请输入手机号</span>
                                <span>忘记密码</span>
                            </p>
                            <div class="loginBtn">
                                <button>登录</button>
                            </div>
                        </div>
                        
                    </el-tab-pane>
                    <el-tab-pane label="注册" name="register">
                        <div class="registerBox">
                            <ul>
                                <li class="registerList">
                                    <input type="text" placeholder="昵称" v-model="UserRegister.userName">
                                </li>
                                 <li class="registerList">
                                    <input type="text" placeholder="请输入手机号" v-model="UserRegister.userTel">
                                </li>
                                 <li class="registerList">
                                    <input type="text" placeholder="输入验证码" v-model="UserRegister.userNum">
                                    <button>获取验证码</button>
                                </li>
                                 <li class="registerList">
                                    <input type="text" placeholder="设置密码" v-model="UserRegister.passWord">
                                </li>
                                 <li class="registerList">
                                    <input type="text" placeholder="请再次输入密码" v-model="UserRegister.passWords">
                                </li>
                            </ul>
                            <p class="pwProblem">
                                <i class="iconfont icon-zhuyi"></i> 两次输入不一致
                            </p>
                            <div class="registerBtn">
                                <div>
                                    <button>注册</button>
                                </div>
                                <p>
                                    点击注册表示同意拓者模型<span>“用户协议”</span>
                                </p>
                            </div>
                        </div>
                       
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
        
    </section>
</template>
<script>
export default {
    name:"jsLogin",
    props:["loginShow"],
    data () {
        return{
            loginName: 'login',//注册登录选项卡
            // loginShow : false,//注册登录弹出框
             UserRegister:{//用户注册信息
                userName : "",//用户名
                userTel : "",//手机号
                userNum : "",//验证码
                passWord: "",//密码
                passWords: ""//确认密码
            },
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            }
        }
    },
    methods:{
        maskPosition(){
            this.style.left = (document.body.offsetWidth - 386)/2 +"px";
            this.style.top = (document.documentElement.clientHeight - 403)/2 +"px";
        },
        mounted() { 
            this.maskPosition();
            window.onresize = ()=>{
                this.maskPosition();
            }
        },
        handleClick(tab, event) {//注册登录选项卡
            console.log(tab, event);
        },
        loginMaskClose(){
                this.loginShow = false;
        },
    }
}
</script>
